<template>
  <el-scrollbar class="form-panel access-info">
    <el-form :model="params" class="demo-form-inline" ref="params" label-position="top">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="$t('supplier.registerAudit.accessClass')" prop="supplyMaterialTypeList">
            <x-mulity-select-tree
              v-model="params.supplyMaterialTypeList"
              ref="selectTree"
              :options="dictOptions['access_type']"
              :placeholder="$t('config.materialType.upNamePlaceholder')"
              :defaultProps="treeProps"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('supplier.registerAudit.accessLeval')" prop="supplierRankId">
            <x-select
              :placeholder="$t('supplier.registerAudit.accessLevalPlaceholder')"
              v-model="params.supplierRankId"
              ref="rankSelect"
              :options="dictOptions['access_level']"
              style="width: 100%"
              :attrOption="{
                label: 'supplierRank',
                value: 'id'
              }"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-scrollbar>
</template>
<script>
  import { cloneDeep, selectDictLabel } from '@package/utils'
  import { EnumApiCode } from '../../../../../../globalEnum.js'
  import { apiGetSupplierAdmittance, apiPostAddAdmittance, apiPostUpdateAdmittance } from '../api/record'

  export default {
    name: 'AccessForm',
    props: {
      dictOptions: {
        type: Object,
        default: () => ({})
      },
      supplierId: {
        type: String
      }
    },
    data() {
      return {
        params: {
          supplyMaterialTypeList: [],
          supplierRankId: ''
        },
        treeProps: {
          label: 'materialTypeName',
          children: 'children'
        }
      }
    },
    watch: {
      supplierId: {
        handler(val) {
          if (val) {
            this.getDetail()
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      selectDictLabel,
      async getDetail() {
        const { data } = await apiGetSupplierAdmittance(this.supplierId)
        this.params = Object.assign(this.params, cloneDeep(data))
        this.$nextTick(() => {
          this.params.supplyMaterialTypeList = this.params.materialTypes.map((v) => {
            return v.materialId
          })
        })
      },
      handleVaildForm() {
        return new Promise((resolve) => {
          this.$refs.params.validate((valid) => {
            resolve(valid)
          })
        })
      },
      onSumit(isVaild = true) {
        return new Promise(async (resolve, reject) => {
          const isSubmit = !isVaild || (await this.handleVaildForm())
          if (isSubmit) {
            const nodeList = this.$refs.selectTree.checkedNodes
            const param = {
              supplierRankId: this.params.supplierRankId,
              supplierRank: this.$refs.rankSelect.selectionName,
              supplierId: this.supplierId,
              materialTypes: nodeList?.length
                ? nodeList.map((node) => {
                    const temp = {
                      materialId: node.id,
                      materialTypeName: node.materialTypeName,
                      materialTypeCode: node.materialTypeCode
                    }
                    return temp
                  })
                : []
            }
            const { data, code } =
              'id' in this.params ? await apiPostUpdateAdmittance(param) : await apiPostAddAdmittance(param)
            if (EnumApiCode.Success === code) {
              // this.getDetail()
              resolve(data)
            } else {
              reject()
            }
          } else {
            reject()
          }
        })
      }
    }
  }
</script>
